<template>
	<view class="register">
		<tm-form
		class="main"
		@submit="submit"
		ref="formData">
			<tm-input name="title" required title="用户名  " v-model="register.username"></tm-input>
			<tm-input name="price" required title="密码    " input-type="digit" v-model="register.password"></tm-input>
			<tm-input name="price" required title="确认密码" input-type="digit" v-model="register.confirm"></tm-input>
			<view class="btn_group">
				<tm-button class="btn" navtie-type="form" theme="bg-gradient-blue-accent" block>确认注册</tm-button>

			</view>
		</tm-form>
	</view>
</template>

<script>
	import axios from 'axios'
	export default {
		name:"reg",
		data() {
			return {
				register:{
					username:"",
					password:"",
					confirm:""
				}
			}
		},
		methods: {
			submit(val){
				if(val){
					console.log(this.register.password,this.register.confirm);
					if(this.register.password === this.register.confirm){
						axios({
							url:"http://119.23.228.42:8004/api/register",
							method:"POST",
							data:{
								username:this.register.username,
								password:this.register.password
							}
						}).then(res=>{
							if(res.data.status === 0){
								uni.showToast({
									icon:'success',
									title:"注册成功",
									complete() {
										uni.navigateTo({
											url:"../login/login?reg=0"
										})
									}
								})
							}else{
								uni.showToast({
									icon:'error',
									title:`${res.data.msg}`
								})
							}
						})
					}else{
						uni.showToast({
							icon:'error',
							title:"两次密码输入不一致"
						})
					}
					
				}
			}
		}
	}
</script>

<style lang="less" scoped>	
.register{
	width: 100vw;
	height: 100vh;
	background: url('../../static/img/register.webp') no-repeat;
	background-size: convert;
	.main{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-70%);
		background-color: rgba(229, 244, 241,0.1);
		box-shadow:2px 2px 10px #95a5a6 ;
		.btn_group{
			padding: 20rpx 30rpx;
			.btn{
				margin-bottom: 20rpx;
			}
		}
		::v-deep .white{
			background-color: transparent !important;
		}
		::v-deep .border-grey-lighten-4-b-1{
			border-bottom: 0;
		}
		}
}
</style>
